/*
  .monkee {
    @include clearfix;
  }
*/
$color-danger: #f7657d;
$color-success: #97d35f;
$color-warning: #F9CF4B;
$color-info: #5c93f7;
$color-primary: #76bf48;
$color-normal: #333;
$color-light: #878787;
$color-lighter: #aaa;
$color-border: #e5e5e5;

$fz-xs: .24rem;
$fz-sm: .28rem;
$fz-normal: .32rem;
$fz-big: .36rem;
$fz-larger: .4rem;
$space-xs: .1rem;
$space-sm: .2rem;
$space-normal: .3rem;
$space-big: .4rem;
$space-larger: .5rem;

@mixin clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

@mixin vertical-align {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

@mixin centerer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@mixin size($width, $height) {
  width: $width;
  height: $height;
}

@mixin ratio($percent) {
  &:after {
    content: "";
    display: block;
    width: 100%;
    padding-bottom: $percent;
  }
}

@mixin opacity($opacity) {
  opacity: $opacity;
  $opacity-ie: $opacity * 100;
  filter: alpha(opacity=$opacity-ie); //IE8
}

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}

@mixin box-shadow($shadow...) {
  -webkit-box-shadow: $shadow;
  -moz-box-shadow: $shadow;
  box-shadow: $shadow;
}

@mixin text-shadow($shadow...) {
  text-shadow: $shadow;
}

@mixin transition($transition...) {
  -webkit-transition: $transition;
  -moz-transition: $transition;
  -ms-transition: $transition;
  -o-transition: $transition;
  transition: $transition;
}

/* # USAGE #
  .monkee {
    @include transition-custom(timing-function, cubic-bezier(0.755, 0.050, 0.855, 0.060));
  }
*/
@mixin transition-custom($key, $value) {
  -webkit-transition-#{$key}: $value;
  -moz-transition-#{$key}: $value;
  -ms-transition-#{$key}: $value;
  -o-transition-#{$key}: $value;
  transition-#{$key}: $value;
}

@mixin rotate($degrees) {
  -webkit-transform: rotate($degrees);
  -moz-transform: rotate($degrees);
  -ms-transform: rotate($degrees);
  -o-transform: rotate($degrees);
  transform: rotate($degrees);
}

@mixin scale($ratio) {
  -webkit-transform: scale($ratio);
  -moz-transform: scale($ratio);
  -ms-transform: scale($ratio);
  -o-transform: scale($ratio);
  transform: scale($ratio);
}

@mixin translate($x, $y) {
  -webkit-transform: translate($x, $y);
  -moz-transform: translate($x, $y);
  -ms-transform: translate($x, $y);
  -o-transform: translate($x, $y);
  transform: translate($x, $y);
}

@mixin skew($x, $y) {
  -webkit-transform: skew($x, $y);
  -moz-transform: skew($x, $y);
  -ms-transform: skew($x, $y);
  -o-transform: skew($x, $y);
  transform: skew($x, $y);
}

@mixin translate3d($x, $y, $z) {
  -webkit-transform: translate3d($x, $y, $z);
  -moz-transform: translate3d($x, $y, $z);
  -ms-transform: translate3d($x, $y, $z);
  -o-transform: translate3d($x, $y, $z);
  transform: translate3d($x, $y, $z);
}

@mixin transform($transforms...) {
  -webkit-transform: $transforms;
  -moz-transform: $transforms;
  -ms-transform: $transforms;
  -o-transform: $transforms;
  transform: $transforms;
}

@mixin background-clip($clip) {
  -webkit-background-clip: $clip;
  -moz-background-clip: $clip;
  background-clip: $clip;
}

@mixin background-size($size) {
  -webkit-background-size: $size;
  -moz-background-size: $size;
  -o-background-size: $size;
  background-size: $size;
}

@mixin linear-gradient($color1, $color2, $start: 0%, $end: 100%) {
  background-color: $color2;
  background-image: -moz-linear-gradient(left, $color1 $start, $color2 $end); /* FF3.6+ */
  background-image: -webkit-linear-gradient(left, $color1 $start, $color2 $end); /* Chrome10+,Safari5.1+ */
  background-image: -o-linear-gradient(left, $color1 $start, $color2 $end); /* Opera 11.10+ */
  background-image: -ms-linear-gradient(left, $color1 $start, $color2 $end); /* IE10+ */
  background-image: linear-gradient(to right, $color1 $start, $color2 $end); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($color1)}', endColorstr='#{ie-hex-str($color2)}', GradientType=0); /* IE6-9 */
}

@mixin box-sizing($boxmodel) {
  -webkit-box-sizing: $boxmodel;
  -moz-box-sizing: $boxmodel;
  box-sizing: $boxmodel;
}

@mixin user-select($select) {
  -webkit-user-select: $select;
  -moz-user-select: $select;
  -o-user-select: $select;
  user-select: $select;
}

@mixin selection() {
  ::selection {
    @content;
  }
  ::-moz-selection {
    @content;
  }
}

@mixin placeholder() {
  &::-webkit-input-placeholder {
    @content;
  }

  &:-moz-placeholder { /* Firefox 18- */
    @content;
  }

  &::-moz-placeholder { /* Firefox 19+ */
    @content;
  }

  &:-ms-input-placeholder {
    @content;
  }
}

@mixin triangle($direction: 'up', $size: 6px, $color: #333) {
  @if type-of($direction) != "string" {
    @warn "`#{$direction}` should be a string for `triangle` mixin.";
  } @else {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    content: '';
    @if ($direction == 'up') {
      border-bottom: $size solid $color;
      border-left: 1/2*$size solid transparent;
      border-right: 1/2*$size solid transparent;
    } @else if ($direction == 'down') {
      border-top: $size solid $color;
      border-left: 1/2*$size solid transparent;
      border-right: 1/2*$size solid transparent;
    } @else if ($direction == 'left') {
      border-top: 1/2*$size solid transparent;
      border-bottom: 1/2*$size solid transparent;
      border-right: $size solid $color;
    } @else if ($direction == 'right') {
      border-top: 1/2*$size solid transparent;
      border-bottom: 1/2*$size solid transparent;
      border-left: $size solid $color;
    }
  }
}

@mixin circle($size) {
  border-radius: 50%;
  height: auto;
  padding-bottom: 0% + $size;
  width: 0% + $size;
}

@mixin square($size) {
  height: auto;
  padding-bottom: 0% + $size;
  width: 0% + $size;
}

@mixin rectangle($size) {
  height: 0;
  padding-bottom: 0% + $size / 3 *2;
  width: 0% + $size;
}

/* # USAGE #
  .visuallyhidden {
    @include visuallyhidden;
  }
*/
@mixin visuallyhidden() {
  clip: rect(0, 0, 0, 0);
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;

  &.focusable:active,
  &.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
  }
}

@mixin font-face($font-family, $file-path, $font-weight: normal, $font-style: normal) {
  @font-face {
    font-family: $font-family;
    font-weight: $font-weight;
    font-style: $font-style;
    src: url('#{$file-path}.eot');
    src: url('#{$file-path}.eot?#iefix') format('embedded-opentype'),
    url('#{$file-path}.woff') format('woff'),
    url('#{$file-path}.ttf') format('truetype'),
    url('#{$file-path}.svg##{$font-family}') format('svg');
  }
}

@mixin image-2x($image, $size) {
  @media (min--moz-device-pixel-ratio: 1.3),
  (-o-min-device-pixel-ratio: 2.6/2),
  (-webkit-min-device-pixel-ratio: 1.3),
  (min-device-pixel-ratio: 1.3),
  (min-resolution: 1.3dppx) {
    background-image: url($image);
    background-size: $size;
  }
}

@mixin keyframes($name) {
  @-webkit-keyframes #{$name} {
    @content;
  }
  @-moz-keyframes #{$name} {
    @content;
  }
  @-ms-keyframes #{$name} {
    @content;
  }
  @keyframes #{$name} {
    @content;
  }
}

@mixin animation($animation) {
  -webkit-animation: $animation;
  -moz-animation: $animation;
  -o-animation: $animation;
  animation: $animation;
}

@mixin filter($filter) {
  -webkit-filter: $filter;
  -moz-filter: $filter;
  -ms-filter: $filter;
  -o-filter: $filter;
  filter: $filter;
}

/* # USAGE #
  .icon {
    @include pseudo-elements(before, 1.56em, .125em) {
      background: #333;
      top: .25em;
    }
  }
*/
@mixin pseudo-elements($el, $width, $height) {
  @if $el == "before" or $el == "after" {
    &:#{$el} {
      content: "";
      position: absolute;
      width: $width;
      height: $height;
      @content;
    }
  } @else {
    @warn "`#{$el}` is not a valid pseudo-element.";
  }
}

@mixin bp($min, $max: false) {
  $query: only screen;

  @if $min {
    $query: append($query, "and (min-width: #{em-calc($min, 16)})", space);
  }
  @if $max {
    $query: append($query, "and (max-width: #{em-calc($max, 16)})", space);
  }

  @media #{$query} {
    @content;
  }
}

/* Functions */

/* # Return a unitless number. */
@function strip-unit($num) {
  @return $num / ($num * 0 + 1);
}

@function lighten($color, $percent) {
  @if type-of($color) != color {
    @warn "`#{$color}` should be a valid color for `lighten`.";
  } @else {
    @return mix(white, $color, $percent);
  }
}

@function darken($color, $percent) {
  @if type-of($color) != color {
    @warn "`#{$color}` should be a valid color for `shade`.";
  } @else {
    @return mix(black, $color, $percent);
  }
}

@function palette($palette, $tone: 'base') {
  @return map-get(map-get($palettes, $palette), $tone);
}

/*
  # Convert Photoshop letter spacing to pixels. http://justinmarsan.com/css-letter-spacing-in-photoshop-and-browsers/
  @params(photoshop-letter-spacing, font-size-in-pixels)

  .foo {
    letter-spacing: letter-spacing-calc(25, 16);
  }
*/
@function letter-spacing-calc($spacing, $font-size) {
  @return ( $spacing * strip-unit($font-size) / 1000) * 1px;
}

/*
  # Convert px to em.
  @params(font-size-in-pixels, optional-em-base)

  .foo {
    margin-top: em-calc(42px);
  }
*/
$em-base: 16px !default;

@function convert-to-em($value, $base-value: $em-base) {
  $value: strip-unit($value) / strip-unit($base-value) * 1em;
  @if ($value == 0em) {
    $value: 0;
  }
  // Turn 0em into 0
  @return $value;
}

@function em-calc($values, $base-value: $em-base) {
  $max: length($values);

  @if $max == 1 {
    @return convert-to-em(nth($values, 1), $base-value);
  }

  $emValues: ();
  @for $i from 1 through $max {
    $emValues: append($emValues, convert-to-em(nth($values, $i), $base-value));
  }
  @return $emValues;
}

// Flexbox Mixins
// http://philipwalton.github.io/solved-by-flexbox/
// https://github.com/philipwalton/solved-by-flexbox
//
// Copyright (c) 2013 Brian Franco
//
// Permission is hereby granted, free of charge, to any person obtaining a
// copy of this software and associated documentation files (the
// "Software"), to deal in the Software without restriction, including
// without limitation the rights to use, copy, modify, merge, publish,
// distribute, sublicense, and/or sell copies of the Software, and to
// permit persons to whom the Software is furnished to do so, subject to
// the following conditions:
// The above copyright notice and this permission notice shall be included
// in all copies or substantial portions of the Software.
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
// OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
// IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
// CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
// TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
// SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
//
// This is a set of mixins for those who want to mess around with flexbox
// using the native support of current browsers. For full support table
// check: http://caniuse.com/flexbox
//
// Basically this will use:
//
// * Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
// * Final standards syntax (FF, Safari, Chrome, IE11, Opera)
//
// This was inspired by:
//
// * http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
//
// With help from:
//
// * http://w3.org/tr/css3-flexbox/
// * http://the-echoplex.net/flexyboxes/
// * http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
// * http://css-tricks.com/using-flexbox/
// * http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
// * https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes

//----------------------------------------------------------------------

// Flexbox Containers
//
// The 'flex' value causes an element to generate a block-level flex
// container box.
//
// The 'inline-flex' value causes an element to generate a inline-level
// flex container box.
//
// display: flex | inline-flex
//
// http://w3.org/tr/css3-flexbox/#flex-containers
//
// (Placeholder selectors for each type, for those who rather @extend)

@mixin flexbox {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
}

%flexbox {
  @include flexbox;
}

//----------------------------------

@mixin inline-flex {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -moz-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

%inline-flex {
  @include inline-flex;
}

//----------------------------------------------------------------------

// Flexbox Direction
//
// The 'flex-direction' property specifies how flex items are placed in
// the flex container, by setting the direction of the flex container's
// main axis. This determines the direction that flex items are laid out in.
//
// Values: row | row-reverse | column | column-reverse
// Default: row
//
// http://w3.org/tr/css3-flexbox/#flex-direction-property

@mixin flex-direction($value: row) {
  @if $value == row-reverse {
    -webkit-box-direction: reverse;
    -webkit-box-orient: horizontal;
  } @else if $value == column {
    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
  } @else if $value == column-reverse {
    -webkit-box-direction: reverse;
    -webkit-box-orient: vertical;
  } @else {
    -webkit-box-direction: normal;
    -webkit-box-orient: horizontal;
  }
  -webkit-flex-direction: $value;
  -moz-flex-direction: $value;
  -ms-flex-direction: $value;
  flex-direction: $value;
}

// Shorter version:
@mixin flex-dir($args...) {
  @include flex-direction($args...);
}

//----------------------------------------------------------------------

// Flexbox Wrap
//
// The 'flex-wrap' property controls whether the flex container is single-line
// or multi-line, and the direction of the cross-axis, which determines
// the direction new lines are stacked in.
//
// Values: nowrap | wrap | wrap-reverse
// Default: nowrap
//
// http://w3.org/tr/css3-flexbox/#flex-wrap-property

@mixin flex-wrap($value: nowrap) {
  // No Webkit Box fallback.
  -webkit-flex-wrap: $value;
  -moz-flex-wrap: $value;
  @if $value == nowrap {
    -ms-flex-wrap: none;
  } @else {
    -ms-flex-wrap: $value;
  }
  flex-wrap: $value;
}

//----------------------------------------------------------------------

// Flexbox Flow (shorthand)
//
// The 'flex-flow' property is a shorthand for setting the 'flex-direction'
// and 'flex-wrap' properties, which together define the flex container's
// main and cross axes.
//
// Values: <flex-direction> | <flex-wrap>
// Default: row nowrap
//
// http://w3.org/tr/css3-flexbox/#flex-flow-property

@mixin flex-flow($values: (row nowrap)) {
  // No Webkit Box fallback.
  -webkit-flex-flow: $values;
  -moz-flex-flow: $values;
  -ms-flex-flow: $values;
  flex-flow: $values;
}

//----------------------------------------------------------------------

// Flexbox Order
//
// The 'order' property controls the order in which flex items appear within
// their flex container, by assigning them to ordinal groups.
//
// Default: 0
//
// http://w3.org/tr/css3-flexbox/#order-property

@mixin order($int: 0) {
  -webkit-box-ordinal-group: $int + 1;
  -webkit-order: $int;
  -moz-order: $int;
  -ms-flex-order: $int;
  order: $int;
}

//----------------------------------------------------------------------

// Flexbox Grow
//
// The 'flex-grow' property sets the flex grow factor. Negative numbers
// are invalid.
//
// Default: 0
//
// http://w3.org/tr/css3-flexbox/#flex-grow-property

@mixin flex-grow($int: 0) {
  -webkit-box-flex: $int;
  -webkit-flex-grow: $int;
  -moz-flex-grow: $int;
  -ms-flex-positive: $int;
  flex-grow: $int;
}

//----------------------------------------------------------------------

// Flexbox Shrink
//
// The 'flex-shrink' property sets the flex shrink factor. Negative numbers
// are invalid.
//
// Default: 1
//
// http://w3.org/tr/css3-flexbox/#flex-shrink-property

@mixin flex-shrink($int: 1) {
  -webkit-flex-shrink: $int;
  -moz-flex-shrink: $int;
  -ms-flex-negative: $int;
  flex-shrink: $int;
}

//----------------------------------------------------------------------

// Flexbox Basis
//
// The 'flex-basis' property sets the flex basis. Negative lengths are invalid.
//
// Values: Like "width"
// Default: auto
//
// http://www.w3.org/TR/css3-flexbox/#flex-basis-property

@mixin flex-basis($value: auto) {
  -webkit-flex-basis: $value;
  -moz-flex-basis: $value;
  -ms-flex-preferred-size: $value;
  flex-basis: $value;
}

//----------------------------------------------------------------------

// Flexbox "Flex" (shorthand)
//
// The 'flex' property specifies the components of a flexible length: the
// flex grow factor and flex shrink factor, and the flex basis. When an
// element is a flex item, 'flex' is consulted instead of the main size
// property to determine the main size of the element. If an element is
// not a flex item, 'flex' has no effect.
//
// Values: none | <flex-grow> <flex-shrink> || <flex-basis>
// Default: See individual properties (1 1 0).
//
// http://w3.org/tr/css3-flexbox/#flex-property

@mixin flex($fg: 1, $fs: null, $fb: null) {

  // Set a variable to be used by box-flex properties
  $fg-boxflex: $fg;

  // Box-Flex only supports a flex-grow value so let's grab the
  // first item in the list and just return that.
  @if type-of($fg) == 'list' {
    $fg-boxflex: nth($fg, 1);
  }

  -webkit-box-flex: $fg-boxflex;
  -webkit-flex: $fg $fs $fb;
  -moz-box-flex: $fg-boxflex;
  -moz-flex: $fg $fs $fb;
  -ms-flex: $fg $fs $fb;
  flex: $fg $fs $fb;
}

//----------------------------------------------------------------------

// Flexbox Justify Content
//
// The 'justify-content' property aligns flex items along the main axis
// of the current line of the flex container. This is done after any flexible
// lengths and any auto margins have been resolved. Typically it helps distribute
// extra free space leftover when either all the flex items on a line are
// inflexible, or are flexible but have reached their maximum size. It also
// exerts some control over the alignment of items when they overflow the line.
//
// Note: 'space-*' values not supported in older syntaxes.
//
// Values: flex-start | flex-end | center | space-between | space-around
// Default: flex-start
//
// http://w3.org/tr/css3-flexbox/#justify-content-property

@mixin justify-content($value: flex-start) {
  @if $value == flex-start {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
  } @else if $value == flex-end {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
  } @else if $value == space-between {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
  } @else if $value == space-around {
    -ms-flex-pack: distribute;
  } @else {
    -webkit-box-pack: $value;
    -ms-flex-pack: $value;
  }
  -webkit-justify-content: $value;
  -moz-justify-content: $value;
  justify-content: $value;
}

// Shorter version:
@mixin flex-just($args...) {
  @include justify-content($args...);
}

//----------------------------------------------------------------------

// Flexbox Align Items
//
// Flex items can be aligned in the cross axis of the current line of the
// flex container, similar to 'justify-content' but in the perpendicular
// direction. 'align-items' sets the default alignment for all of the flex
// container's items, including anonymous flex items. 'align-self' allows
// this default alignment to be overridden for individual flex items. (For
// anonymous flex items, 'align-self' always matches the value of 'align-items'
// on their associated flex container.)
//
// Values: flex-start | flex-end | center | baseline | stretch
// Default: stretch
//
// http://w3.org/tr/css3-flexbox/#align-items-property

@mixin align-items($value: stretch) {
  @if $value == flex-start {
    -webkit-box-align: start;
    -ms-flex-align: start;
  } @else if $value == flex-end {
    -webkit-box-align: end;
    -ms-flex-align: end;
  } @else {
    -webkit-box-align: $value;
    -ms-flex-align: $value;
  }
  -webkit-align-items: $value;
  -moz-align-items: $value;
  align-items: $value;
}

//----------------------------------

// Flexbox Align Self
//
// Values: auto | flex-start | flex-end | center | baseline | stretch
// Default: auto

@mixin align-self($value: auto) {
  // No Webkit Box Fallback.
  -webkit-align-self: $value;
  -moz-align-self: $value;
  @if $value == flex-start {
    -ms-flex-item-align: start;
  } @else if $value == flex-end {
    -ms-flex-item-align: end;
  } @else {
    -ms-flex-item-align: $value;
  }
  align-self: $value;
}

//----------------------------------------------------------------------

// Flexbox Align Content
//
// The 'align-content' property aligns a flex container's lines within the
// flex container when there is extra space in the cross-axis, similar to
// how 'justify-content' aligns individual items within the main-axis. Note,
// this property has no effect when the flexbox has only a single line.
//
// Values: flex-start | flex-end | center | space-between | space-around | stretch
// Default: stretch
//
// http://w3.org/tr/css3-flexbox/#align-content-property

@mixin align-content($value: stretch) {
  // No Webkit Box Fallback.
  -webkit-align-content: $value;
  -moz-align-content: $value;
  @if $value == flex-start {
    -ms-flex-line-pack: start;
  } @else if $value == flex-end {
    -ms-flex-line-pack: end;
  } @else {
    -ms-flex-line-pack: $value;
  }
  align-content: $value;
}

@mixin column-count($value) {
  -moz-column-count: $value;
  -webkit-column-count: $value;
  column-count: $value;
}

@mixin column-gap($value) {
  -moz-column-gap: $value;
  -webkit-column-gap: $value;
  column-gap: $value;
}

.ui-border-t {
  border-top: 1px solid #e5e5e5
}

.ui-border-b {
  border-bottom: 1px solid #e5e5e5
}

.ui-border-tb {
  border-top: #e5e5e5 1px solid;
  border-bottom: #e5e5e5 1px solid;
  background-image: none
}

.ui-border-l {
  border-left: 1px solid #e5e5e5
}

.ui-border-r {
  border-right: 1px solid #e5e5e5
}

.ui-border {
  border: 1px solid #e5e5e5
}

.ui-border-radius {
  border: 1px solid #e5e5e5;
  border-radius: 4px
}


@media screen and (-webkit-min-device-pixel-ratio: 2) {
  .ui-border-radius {
    position:relative;
    border: 0
  }

  .ui-border-radius:before {
    content: "";
    width: 200%;
    height: 200%;
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid #e5e5e5;
    -webkit-transform: scale(0.5);
    -webkit-transform-origin: 0 0;
    padding: 1px;
    -webkit-box-sizing: border-box;
    border-radius: 8px;
    pointer-events: none
  }
}

@media screen and (-webkit-min-device-pixel-ratio: 2) {
  .ui-border {
    position:relative;
    border: 0
  }

  .ui-border-t,.ui-border-b,.ui-border-l,.ui-border-r,.ui-border-tb {
    border: 0;
  }

  .ui-border-t {
    background-position: left top;
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.5,transparent),color-stop(0.5,#e5e5e5),to(#e5e5e5))
  }

  .ui-border-b {
    background-position: left bottom;
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0.5,transparent),color-stop(0.5,#e5e5e5),to(#e5e5e5))
  }

  .ui-border-t,.ui-border-b,.ui-border-tb {
    background-repeat: repeat-x;
    -webkit-background-size: 100% 1px;
  }

  .ui-border-tb {
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.5,transparent),color-stop(0.5,#e5e5e5),to(#e5e5e5)),-webkit-gradient(linear,left top,left bottom,color-stop(0.5,transparent),color-stop(0.5,#e5e5e5),to(#e5e5e5));
    background-position: top,bottom
  }

  .ui-border-l {
    background-position: left top;
    background-image: -webkit-gradient(linear,right top,left top,color-stop(0.5,transparent),color-stop(0.5,#e5e5e5),to(#e5e5e5))
  }

  .ui-border-r {
    background-position: right top;
    background-image: -webkit-gradient(linear,left top,right top,color-stop(0.5,transparent),color-stop(0.5,#e5e5e5),to(#e5e5e5))
  }

  .ui-border-l,.ui-border-r {
    background-repeat: repeat-y;
    -webkit-background-size: 1px 100%
  }

  .ui-border:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.5,transparent),color-stop(0.5,#e5e5e5),to(#e5e5e5)),-webkit-gradient(linear,left top,right top,color-stop(0.5,transparent),color-stop(0.5,#e5e5e5),to(#e5e5e5)),-webkit-gradient(linear,left top,left bottom,color-stop(0.5,transparent),color-stop(0.5,#e5e5e5),to(#e5e5e5)),-webkit-gradient(linear,right top,left top,color-stop(0.5,transparent),color-stop(0.5,#e5e5e5),to(#e5e5e5));
    -webkit-background-size: 100% 1px,1px 100%,100% 1px,1px 100%;
    background-size: 100% 1px,1px 100%,100% 1px,1px 100%;
    -webkit-background-size: 100% 1px,1px 100%,100% 1px,1px 100%;
    background-size: 100% 1px,1px 100%,100% 1px,1px 100%;
    background-repeat: no-repeat;
    background-position: top,right,bottom,left;
    padding: 1px;
    -webkit-box-sizing: border-box;
    z-index: 10;
    pointer-events: none
  }
}
